import React from 'react';
import { Route,Redirect } from 'react-router-dom';
import QueueAnim from 'rc-queue-anim';
import { NavBar } from 'antd-mobile';
import { connect } from 'react-redux';
import Boss from '../boss/boss';
import Genius from '../genius/genius';
import User from '../user/user';
import NavLinkBar from '../navlinkbar/navlinkbar';
import Message from '../message/message';
import { getMsgList,recvmsg } from '../../redux/chat.redux';


@connect(
state => state,
{ getMsgList,recvmsg }
)
class Dashboard extends React.Component{
	componentDidMount(){
		if(this.props.chat.chatmsg.length === 0){
			this.props.getMsgList();
			this.props.recvmsg();
		}
	}
	render(){
		const navList = [
			{
				path:'/boss',
				text:'牛人',
				icon:'genius',
				title:'牛人列表',
				component:Boss,
				hide:this.props.user.type === 'genius'
			},
			{
				path:'/genius',
				text:'职位',
				icon:'job',
				title:'职位列表',
				component:Genius,
				hide:this.props.user.type === 'boss'
			},
			{
				path:'/message',
				text:'消息',
				icon:'message',
				title:'消息列表',
				component:Message,
			},
			{
				path:'/me',
				text:'我的',
				icon:'me',
				title:'个人中心',
				component:User,
			}
		];
		const curPage = navList.find( v => this.props.location.pathname === v.path);
		return curPage 
		?(
			<div>
				<QueueAnim>
					<NavBar mode='dark' className='fixd-header'>{curPage.title}</NavBar>
					<div>
						<Route key={curPage.path} path={curPage.path} component={curPage.component}></Route>
					</div>
					<NavLinkBar data={navList}></NavLinkBar>
				</QueueAnim>
			</div>
		)
		:<Redirect to='/me'></Redirect>
		
		
	}
}

export default Dashboard;

// 				<Switch>
// 					{navList.map( v => (<Route key={v.path} path={v.path} component={v.component}></Route>))}
// 				</Switch>